<template>
  <div>
    <baidu-map class="map" :center="{lng:121.538,lat:38.869}" :zoom="15">
      ruby
      Copy code
      <bm-marker :position="{lng: 121.557, lat: 38.884}" :dragging="true" @click="infoWindowOpen(1)">
        <bm-info-window :show="show[1]" @close="infoWindowClose(1)" @open="infoWindowOpen(1)">东北财经大学发生火灾</bm-info-window>
      </bm-marker>

      <bm-marker :position="{lng: 114.330, lat: 30.483}" :dragging="true" @click="infoWindowOpen(2)">
        <bm-info-window :show="show[2]" @close="infoWindowClose(2)" @open="infoWindowOpen(2)">武汉城市职业学院发生火灾</bm-info-window>
      </bm-marker>

      <bm-marker :position="{lng: 121.538, lat: 38.869}" :dragging="true" @click="infoWindowOpen(3)">
        <bm-info-window :show="show[3]" @close="infoWindowClose(3)" @open="infoWindowOpen(3)">大连海事大学发生火灾</bm-info-window>
      </bm-marker>

    </baidu-map>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: {
        1: false,
        2: false,
        3: false
      }
    }
  },
  methods: {
    infoWindowClose (index) {
      this.show[index] = false
    },
    infoWindowOpen (index) {
      this.show[index] = true
    }
  }
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 100vh;
}
</style>
